<template>
  <Layout>
    <div class="volunteer-project">
      <!-- 面包屑导航 -->
      <div class="breadcrumb">
          当前位置：<router-link to="/home" class="breadcrumb-link">首页</router-link> > <span class="breadcrumb-current">志愿项目</span>
      </div>
      <div class="filter-section">
        <!-- 项目名称搜索 -->
        <div class="filter-row">
          <div class="filter-label">项目名称</div>
          <el-input 
            v-model="searchForm.activityName"
            placeholder="请输入项目名称"
            clearable
            @input="handleSearch"
          />
        </div>

        <!-- 服务类别 -->
        <div class="filter-row">
          <div class="filter-label">服务类别</div>
          <div class="filter-options">
            <span 
              v-for="service in services" 
              :key="service.value"
              class="option"
              :class="{ 
                'default-active': !searchForm.serviceCategory && service.value === '0',
                'active': searchForm.serviceCategory === service.value
              }"
              @click="handleFilterClick('serviceCategory', service.value)"
            >{{ service.label }}</span>
          </div>
        </div>

        <!-- 项目状态 -->
        <div class="filter-row">
          <div class="filter-label">项目状态</div>
          <div class="filter-options">
            <span 
              v-for="status in statuses" 
              :key="status.value"
              class="option"
              :class="{ 
                'default-active': !searchForm.activityStatus && status.value === '0',
                'active': searchForm.activityStatus === status.value
              }"
              @click="handleFilterClick('activityStatus', status.value)"
            >{{ status.label }}</span>
          </div>
        </div>

        <!-- 地点筛选 -->
        <div class="filter-row">
          <div class="filter-label">活动地点</div>
          <div class="filter-options">
            <span 
              v-for="location in locations" 
              :key="location.value"
              class="option"
              :class="{
                'default-active': !searchForm.address && location.value === '0',
                'active': searchForm.address === location.value
              }"
              @click="handleFilterClick('address', location.value)"
            >{{ location.label }}</span>
          </div>
        </div>

        <!-- 发起人搜索 -->
        <div class="filter-row">
          <div class="filter-label">发起人</div>
          <el-input 
            v-model="searchForm.initiator"
            placeholder="请输入发起人"
            clearable
            @input="handleSearch"
          />
        </div>
      </div>

      <!-- 项目列表 -->
      <div class="project-list">
        <el-row :gutter="20">
          <el-col :span="8" v-for="project in projectList" :key="project.activityId">
            <el-card class="project-card" shadow="hover">
              <div class="project-image">
                <el-image 
                  :src="project.activityPictureInfo || '/default-project.jpg'"
                  fit="cover"
                  :alt="project.activityName">
                  <template #error>
                    <div class="image-placeholder">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </template>
                </el-image>
              </div>
              <div class="project-info">
                <h3 class="project-title">{{ project.activityName }}</h3>
                <div class="project-details">
                  <el-descriptions :column="1" size="small">
                    <el-descriptions-item label="地点">
                      <i class="el-icon-location"></i> {{ project.address }}
                    </el-descriptions-item>
                    <el-descriptions-item label="时间">
                      <i class="el-icon-date"></i> {{ formatDate(project.startDate) }}
                    </el-descriptions-item>
                    <el-descriptions-item label="时长">
                      <i class="el-icon-time"></i> {{ project.durationDisplay }}
                    </el-descriptions-item>
                    <el-descriptions-item label="发起人">
                      <i class="el-icon-user"></i> {{ project.initiator }}
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
                <div class="project-tags">
                  <el-tag size="small" effect="plain">{{ getServiceLabel(project.serviceCategory) }}</el-tag>
                  <el-tag 
                    size="small" 
                    :type="getStatusType(project.activityStatus)"
                    effect="dark">
                    {{ getStatusLabel(project.activityStatus) }}
                  </el-tag>
                </div>
                <div class="project-actions">
                  <el-button 
                    class="detail-btn"
                    type="primary" 
                    size="middle" 
                    plain
                    @click="router.push(`/project/${project.activityId}`)">
                    <i class="el-icon-view"></i>
                    查看详情
                  </el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </Layout>
</template>

<script setup>
import Layout from '@/components/Layout.vue'
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import axios from 'axios'

const router = useRouter()

// 筛选选项数据
const services = [
  { value: '0', label: '全部' },
  { value: '1', label: '社区服务' },
  { value: '2', label: '文化艺术' },
  { value: '3', label: '义务维修' },
  { value: '4', label: '环境保护' },
  { value: '5', label: '交通引导' },
  { value: '6', label: '禁毒宣传' },
  { value: '7', label: '其他' }
]

const statuses = [
  { value: '0', label: '全部' },
  { value: '1', label: '待开始' },
  { value: '2', label: '进行中' },
  { value: '3', label: '已结束' }
]

const locations = [
  { value: '0', label: '全部' },
  { value: '南珠东校区', label: '南珠东校区' },
  { value: '南珠西校区', label: '南珠西校区' },
  { value: '银滩校区', label: '银滩校区' }
]


// 搜索表单
const searchForm = ref({
  activityName: '',
  activityStatus: '',
  serviceCategory: '',
  initiator: '',
  address: ''
})

// 项目列表数据
const projectList = ref([])

// 获取项目列表
const fetchProjects = async () => {
  try {
    const params = {}
    if (searchForm.value.activityName) params.activityName = searchForm.value.activityName
    if (searchForm.value.activityStatus) params.activityStatus = searchForm.value.activityStatus
    if (searchForm.value.serviceCategory) params.serviceCategory = searchForm.value.serviceCategory
    if (searchForm.value.initiator) params.initiator = searchForm.value.initiator
    if (searchForm.value.address) params.address = searchForm.value.address

    const response = await axios.get('http://localhost:9090/activities/search', { params })
    projectList.value = response.data
  } catch (error) {
    ElMessage.error('获取项目列表失败')
    console.error('获取项目列表失败:', error)
  }
}

// 处理筛选点击
const handleFilterClick = (filterType, value) => {
  searchForm.value[filterType] = value === '0' ? '' : value
  fetchProjects()
}

// 处理搜索
const handleSearch = () => {
  fetchProjects()
}

// 格式化日期
const formatDate = (dateStr) => {
  const date = new Date(dateStr)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 获取服务类别标签
const getServiceLabel = (value) => {
  const service = services.find(s => s.value === value)
  return service ? service.label : ''
}

// 获取状态标签
const getStatusLabel = (value) => {
  const status = statuses.find(s => s.value === value)
  return status ? status.label : ''
}

// 获取状态类型
const getStatusType = (status) => {
  switch (status) {
    case '1': return 'warning'  // 待开始
    case '2': return 'success'  // 进行中
    case '3': return 'info'     // 已结束
    default: return ''
  }
}

onMounted(() => {
  fetchProjects()
})
</script>

<style scoped>
.volunteer-project {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
  color: #666;
  font-size: 14px;
}

.breadcrumb-link {
  color: #dd2b2b;
  text-decoration: none;
}

.breadcrumb-link:hover {
  color: #ff4d4d;
}

.breadcrumb-current {
  color: #dd2b2b;
}

.filter-section {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.filter-row {
  margin-bottom: 15px;
}

.filter-row:last-child {
  margin-bottom: 0;
}

.filter-label {
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.option {
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  background: #f5f7fa;
}

.option:hover {
  background: #e4e7ed;
}

.option.active,
.option.default-active {
  background: #dd2b2b;
  color: #fff;
}

.project-card {
  margin-bottom: 20px;
  transition: all 0.3s;
}

.project-image {
  height: 200px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

.project-image .el-image {
  width: 100%;
  height: 100%;
}

.image-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  color: #909399;
}

.project-info {
  padding: 15px;
}

.project-title {
  font-size: 18px;
  margin: 0 0 15px;
  color: #303133;
}

.project-details {
  margin-bottom: 15px;
}

.project-tags {
  margin-bottom: 15px;
  display: flex;
  gap: 8px;
}

.project-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.project-actions .el-button {
  flex: 1;
  border-radius: 20px;
  font-weight: 500;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.project-actions .detail-btn {
  background: #fff;
  border: 1px solid #409eff;
  color: #409eff;
}

.project-actions .detail-btn:hover {
  background: #409eff;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.project-actions .signup-btn {
  background: #67c23a;
  border: none;
  color: #fff;
}

.project-actions .signup-btn:hover {
  background: #85ce61;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3);
}

.project-actions .el-button i {
  margin-right: 4px;
}
</style>